<template>
  <div class="notelist">
    <van-loading v-if="!notes" size="30px" vertical>加载中...</van-loading>
    <div class="img">
      <img :src="notes.images[0].u" alt="" />
      <van-sticky>
        <div class="icon">
          <div
            class="iconfont icon-arrowRight-copy-copy"
            @click="$router.go(-1)"
          ></div>
          <div class="right">
            <i class="iconfont icon-pengyouquan"> </i>
            <i class="iconfont icon-weixin"> </i>
            <i class="iconfont icon-diandiandian"></i>
          </div>
        </div>
      </van-sticky>
    </div>
    <div class="contain">
      <div class="title">{{ notes.title }}</div>

      <!-- <div class="cookstory">{{ recipe.cookstory }}</div> -->
      <div class="detailed-list" v-for="(item, index) in three" :key="index">
        #{{ item.c }}
      </div>
      <div
        class="detailed-listt"
        v-for="(item, index) in zero"
        :key="index + 10"
      >
        #{{ item.c }}
      </div>

      <div class="count">
        <div class="time">{{ notes.publishtime }}</div>
        <div class="right">
          <div class="favo">{{ notes.favo_count_text }}次收藏</div>
          <div class="like">{{ notes.like_count_text }}次赞</div>
        </div>
      </div>
    </div>

    <div class="notetitle">相关笔记</div>

    <div class="content">
      <div class="contains" v-for="(item, index) in notess" :key="index">
        <router-link
          tag="div"
          :to="'/note/notelist?id=' + item.note.id"
          class="img"
        >
          <img :src="item.note.image_u" alt="" />
        </router-link>
        <div class="punch-the-clock" v-if="item.note.straight_text">
          <div class="bg">
            <i class="iconfont icon-sign-fill"></i>
          </div>
          <div class="day">{{ item.note.straight_text }}</div>
        </div>

        <div class="title">{{ item.note.title }}</div>
        <div class="info">
          <div class="left">
            <div class="user">
              <img :src="item.note.author.p" alt="" />
            </div>
            <div class="name">{{ item.note.author.n }}</div>
          </div>
          <div class="right">
            <i
              :class="[
                'iconfont',
                item.note.like_state == 0 ? 'icon-aixin' : 'icon-aixin1',
              ]"
              @click="Toggle(index, item.note.like_state)"
            ></i>
            <div class="num">{{ item.note.like_count }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="foot">
      <input
        type="text"
        placeholder="说点什么吧..."
        v-model="inputcomments"
        @keyup.enter="send"
      />
      <div class="right">
        <div class="iconfont icon-pinglun" @click="showPopup"></div>
        <div class="num">评论</div>
        <div
          :class="['iconfont', iconn ? 'icon-aixin' : 'icon-aixin1']"
          @click.stop="toggles"
        ></div>
        <div class="likenum">{{ notes.like_count_text }}</div>
        <div
          :class="[
            'iconfont',
            icon ? 'icon-shoucang' : 'icon-shoucang-tianchong',
          ]"
          @click.stop="toggle"
        ></div>
        <div class="sc">{{ sc }}</div>
      </div>
    </div>

    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="top" v-if="comments">全部评论</div>
      <div class="tain">
        <div class="containn" v-for="(item, index) in comments" :key="index">
          <div class="left">
            <div class="img">
              <img :src="item.u.p" alt="" />
            </div>
            <div class="r">
              <div class="t">
                <div class="username">{{ item.u.n }}</div>
                <div class="lvl">LV.{{ item.u.lvl }}</div>
              </div>
              <div class="content_c">{{ item.content[0].c }}</div>
            </div>
          </div>
          <div class="right">
            <div
              class="iconfont icon-aixin"
            
            ></div>
            <div class="likenum">{{ comments[0].like_count }}</div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="iconfont icon-xiaolian"></div>
        <input
          type="text"
          placeholder="我想说两句"
          v-model="inputcomments"
          @keyup.enter="send"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Sticky } from "vant";
import { Popup } from "vant";
import { Loading } from "vant";
Vue.use(Loading);
Vue.use(Popup);
Vue.use(Sticky);
import { getnotes, getNotesRelated, getcomments } from "../../api/home";
export default {
  data() {
    return {
      notes: null,
      three: [],
      notess: null,
      comments: [
        {
          u: {
            lvl: 1,
            n: "Ninja",
            p: "http://tx1.douguo.net/upload/photo/1/1/1/70_5ef4441f687d47f348f17b4b7a982c15.png",
          },
          like_count: 0,
          like: 0,
          content: [
            {
              c: "111",
            },
          ],
        },
      ],
      zero: [],
      sc: "收藏",
      likenum: 362,
      inputcomments: "",
      icon: true,
      iconn: true,
      show: false,
      info: {
        u: {
          lvl: 1,
          n: "Ninja",
          p: "http://tx1.douguo.net/upload/photo/1/1/1/70_5ef4441f687d47f348f17b4b7a982c15.png",
        },
        like_count: 0,
        like: 0,
        content: [
          {
            c: "111",
          },
        ],
      },
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    getcommentsFun() {
      let queryId = this.$route.query.id;
      getcomments(queryId).then((data) => {
        this.comments = data.result;
      });
    },
    getnotesFun() {
      let queryId = this.$route.query.id;
      getnotes(queryId).then((data) => {
        this.notes = data.result.note;

        this.notes.contents.forEach((item) => {
          if (item.type == 3) {
            this.three.push(item);
          }
          if (item.type == 0) {
            this.zero.push(item);
          }
        });
        console.log(this.notes);
        console.log(this.comments);
      });
    },
    getNotesRelatedFun() {
      let queryId = this.$route.query.id;
      getNotesRelated(queryId).then((data) => {
        this.notess = data.result.list;

        console.log(this.notess);
      });
    },
    Toggle(index, like_state) {
      if (like_state == 0) {
        this.notess[index].note.like_state = 1;
        this.notess[index].note.like_count += 1;
      } else {
        this.notess[index].note.like_state = 0;
        this.notess[index].note.like_count -= 1;
      }
    },
    send() {
      this.comments.unshift(this.info);
      console.log(this.comments);
      this.inputcomments = "";
    },
    toggle() {
      this.icon = !this.icon;
      if (!this.icon) {
        this.sc = "已收藏";
      } else {
        this.sc = "收藏";
      }
    },
    toggles() {
      this.iconn = !this.iconn;
      if (!this.iconn) {
        this.notes.like_count_text += 1;
      } else {
        this.notes.like_count_text -= 1;
      }
    },
     
  },
  created() {
    this.getnotesFun();
    this.getNotesRelatedFun();
    this.getcommentsFun();
  },
};
</script>


<style lang="less">
.notelist {
  .img {
    position: relative;
    width: 100%;
    img {
      width: 100%;
    }
    .icon {
      width: 89%;
      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
      top: 0px;
      color: #fff;
      padding: 0 20px;
      padding-bottom: 10px;
      padding-top: 30px;
      .iconfont {
        font-size: 25px;
      }

      .right {
        i {
          margin-left: 25px;
        }
      }
    }
  }
  .contain {
    margin: 0 20px;
    .title {
      font-size: 20px;
      color: #060606;
      margin-top: 18px;
      margin-bottom: 15px;
    }

    .detailed-list {
      color: #50969f;
      margin-right: 15px;
      margin-bottom: 12px;
      display: inline-block;
    }
    .detailed-listt {
      color: #333;
      margin-right: 15px;
      display: inline-block;
      line-height: 25px;
      margin-bottom: 15px;
    }
    .count {
      color: #9e9e9e;
      font-size: 10px;
      display: flex;
      justify-content: space-between;
      .right {
        display: flex;
        .favo {
          margin-right: 8px;
        }
      }
    }
  }

  .notetitle {
    margin: 0 20px;
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 20px;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    .contains {
      margin-left: 5px;
      margin-bottom: 15px;

      width: 48%;
      .img {
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 250px;
        }
      }
      .punch-the-clock {
        padding: 0 7px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .bg {
          position: relative;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #357c70;
          i {
            position: absolute;
            top: 1px;
            left: 2px;
            font-size: 6px;
            color: #fff;
          }
        }
        .day {
          color: #959695;
          font-size: 10px;
          margin-left: 3px;
        }
      }
      .title {
        padding: 0 7px;
        font-size: 12px;
        height: 35px;
        overflow: hidden;
        color: #050505;
        margin-bottom: 10px;
      }
      .info {
        padding: 0 7px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .user {
            width: 15px;
            height: 15px;
            background: #f9ca75;
            border-radius: 50%;
            img {
              width: 15px;
              height: 15px;
              border-radius: 50%;
            }
          }
          .name {
            margin-left: 3px;
            font-size: 10px;
            color: #9f9f9f;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .icon-aixin {
            font-weight: bold;
            color: #9f9f9f;
          }
          .icon-aixin1 {
            color: #e41b2d;
          }
          .icon-bianji {
            color: #426970;
          }
          .num {
            margin-left: 3px;
            line-height: 4px;
            color: #9f9f9f;
            font-size: 10px;
          }
          .action_title {
            color: #282828;
            margin-left: 3px;
            line-height: 4px;
            font-size: 10px;
          }
        }
      }
    }
  }

  .create_time {
    margin: 0 20px;
    margin-bottom: 90px;
    color: #898989;
  }
  .foot {
    justify-content: space-between;
    box-shadow: 0px -15px 10px 0px #f4f4f4;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    display: flex;
    background-color: #ffffff;
    color: #111111;
    z-index: 1;
    input {
      width: 145px;
      height: 30px;
      margin-left: 15px;
      border: none;
      background: #f7f7f7;
      border-radius: 30px;
      padding-left: 15px;
    }
    .right {
      font-size: 10px;
      display: flex;
      margin-right: 15px;
      align-items: center;
      .iconfont {
        margin-right: 3px;
        margin-left: 10px;
        font-size: 20px;
        font-weight: bold;
      }
      .icon-aixin {
        font-size: 23px;
      }
      .icon-shoucang-tianchong {
        color: #fdc837;
      }
      .icon-aixin1 {
        color: #d62b2b;
      }
    }
  }
  .van-popup--bottom {
    border-radius: 15px 15px 0 0;
    .top {
      padding: 17px 251px 30px 0;
      margin-left: 15px;
      position: fixed;
      background: #fff;
      z-index: 1;
      font-weight: bold;
    }
    .van-popup__close-icon--top-right {
      top: 282px;
      right: 16px;
      position: fixed;
      background: #fff;
      z-index: 1;
    }
    .tain {
      margin-top: 82px;
      margin-bottom: 100px;
    }
    .footer {
      justify-content: space-between;
      box-shadow: 0px -10px 10px 0px #f4f4f4;
      align-items: center;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 70px;
      display: flex;
      background-color: #ffffff;
      color: #111111;
      z-index: 1;

      input {
        width: 295px;
        height: 30px;
        margin-left: 15px;
        border: none;
        background: #f7f7f7;
        border-radius: 30px;
        padding-left: 15px;
        margin: 0 15px 0 18px;
      }
      .icon-xiaolian {
        margin-left: 15px;
        font-size: 21px;
        font-weight: bold;
      }
    }
    .containn {
      margin: 0 15px 30px 15px;
      display: flex;
      font-weight: bold;
      justify-content: space-between;
      .left {
        display: flex;
        .img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
        }
        .r {
          .t {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
            margin-top: 6px;
            .username {
              font-size: 13px;
              margin-right: 10px;
            }
            .lvl {
              font-size: 10px;
              color: #a99f40;
            }
          }
          .content_c {
            font-size: 14px;
          }
        }
      }
      .right {
        display: flex;
        margin-top: 6px;
        .iconfont {
          font-weight: bold;
          margin-right: 3px;
        }
        .icon-aixin1 {
          color: #d62b2b;
        }
        .likenum {
          font-size: 14px;
        }
      }
    }
  }
}
</style>